<template>
  <el-dialog
    v-el-drag-dialog="{ drag: true, full: true, resize: true }"
    title="车辆品牌"
    :width="'400px'"
    :close-on-click-modal="false"
    :visible.sync="md.state"
    @close="closeMd"
    v-if="md.state"
  >
    <el-form :model="fm.ps" ref="formRef" :label-width="'100px'">
      <el-form-item
        label="车辆类型"
        prop="carType"
        :rules="[
          { required: true, message: '请选择车辆类型', trigger: 'blur' },
        ]"
      >
        <el-select
          v-model="fm.ps.carType"
          :placeholder="'车辆类型选择'"
          style="width: 100%"
          @change="handleChange"
        >
          <el-option :label="'大巴车'" :value="'BUS'"></el-option>
          <el-option :label="'中巴车'" :value="'MINIBUS'"></el-option>
          <el-option :label="'商务车'" :value="'MPV'"></el-option>
          <el-option :label="'越野车'" :value="'SUV'"></el-option>
          <el-option :label="'轿车'" :value="'CAR'"></el-option>
          <el-option :label="'保姆车'" :value="'BMPV'"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="品牌名称"
        prop="brandName"
        :rules="[
          { required: true, message: '请输入车辆品牌名称', trigger: 'blur' },
        ]"
      >
        <el-input
          v-model="fm.ps.brandName"
          placeholder="请输入车辆品牌名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" :disabled="fm.sb.load">{{
          fm.sb.text
        }}</el-button>
        <el-button @click="closeMd">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import elDragDialog from "@/directive/el-drag-dialog";
import {
  brandAdd,
  brandUpdate,
  findByIdObj,
} from "@/api/services/common.service";

export default {
  name: "AddType",
  directives: { elDragDialog },
  props: ["state", "isEditId"],
  components: {},
  data() {
    return {
      md: { state: this.state },
      fm: {
        fname: "addGroupFm",
        ps: {
          carType: "", //车辆类型
          brandName: "", // 车辆品牌名称
        },
        sb: {
          load: false,
          text: "添加",
        },
      },
      loading: false,
    };
  },
  created() {
    if (!!this.isEditId) {
      this.getListById();
    }
  },
  methods: {
    getArrCarType(index) {
      return {
        BUS: "大巴车",
        MINIBUS: "中巴车",
        MPV: "商务车",
        SUV: "越野车",
        CAR: "轿车",
        BMPV: "保姆车",
      }[index];
    },
    handleChange(val) {
      this.$set(this.fm.ps, "carType", val);
      // this.fm.ps.brandName = this.getArrCarType(val);
    },
    // 通过ID 获取到对象
    getListById() {
      findByIdObj({ id: this.isEditId }).then((res) => {
        if (res.code == 1) {
          const type = res.data.vehicleType;
          this.fm.ps = res.data;
          this.fm.ps.carType = this.getArrCarType(type);
          console.log(this.fm.ps, "ressss");
        } else {
          that.U.qsuccess(res.msg);
        }
      });
    },
    /* 关闭弹框 */
    closeMd() {
      this.$emit("getMdState", false);
    },

    /**
     * 提交表单
     */
    onSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.fm.sb.load = true; // 添加按钮禁用效果
          let loading = this.U.qloading("提交中，请稍后..."); // 添加遮
          const fet = !!this.isEditId ? brandUpdate : brandAdd;
          const pd = !!this.isEditId
            ? {
                ...this.fm.ps,
                id: this.isEditId,
              }
            : {
                ...this.fm.ps,
              };
          fet(pd)
            .then((res) => {
              this.fm.sb.load = false; // 取消按钮禁用效果
              this.U.qclose(loading); // 关闭遮罩
              if (!res || res.code !== 1) {
                this.U.qerror(res.msg);
              } else {
                this.U.qsuccess(res.msg);
                this.closeMd();
                this.$emit("reloadDg");
              }
            })
            .catch(() => {
              this.U.qclose(loading);
            });
        }
      });
    },
  },
};
</script>